<template>
    <div>
        <div>
            <el-form ref="searchForm" :inline="true" :model="condition.search" label-suffix="" label-width="100px"
                     label-position="left" size="small">
                <el-row>
                    <el-col>
                        <el-form-item label="数据日期" prop="syncDate">
                            <el-date-picker
                                v-model="condition.search.syncDate"
                                type="date"
                                placeholder="数据日期"
                                value-format="yyyy-MM-dd"
                                align="right">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" v-on:click="getData">查询</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" v-on:click="reset">重置</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" v-on:click="exportExcel">导出</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="success" v-on:click="syncDialogVisible = true">同步</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="revenue-tips">
            实收金额=应收金额-优惠金额-退款金额<br/>
            应收金额，包括了与美团点评合作的团购、买单、美团收单业务的线上交易数据，应收金额：用户消费后应该付的原价金额，未扣除优惠和退款<br/>
            订单数，包括了与美团点评合作的团购、买单、美团收单业务的线上交易数据，订单数：用户消费的订单数量，一次验证多张团购券，算多个订单<br/>
            笔单价=应收额/订单数（所选时间内平均的订单金额）
        </div>
        <el-table
            id="mainTable"
            :data="tableData"
            size="small"
            header-cell-class-name="tableHeaderStyle"
            :row-class-name="tableRowClassName">
            <el-table-column label="序号" width="50">
                <template v-slot="scope">
                    <span>{{ (condition.page - 1) * condition.rows + scope.$index + 1 }}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="shopId"
                label="门店ID">
            </el-table-column>
            <el-table-column
                prop="actualAmt"
                label="实收金额">
            </el-table-column>
            <el-table-column
                prop="shouldAmt"
                label="应收金额">
            </el-table-column>
            <el-table-column
                prop="orderCount"
                label="订单数">
            </el-table-column>
            <el-table-column
                prop="perAmt"
                label="笔单价">
            </el-table-column>
            <el-table-column
                prop="newDpCount"
                label="点评新增评价">
            </el-table-column>
            <el-table-column
                prop="newMtCount"
                label="美团新增评价">
            </el-table-column>
            <el-table-column
                prop="mtAmt"
                label="美团收单金额">
            </el-table-column>
            <el-table-column
                prop="groupAmt"
                label="团购收单金额">
            </el-table-column>
            <el-table-column
                prop="buyAmt"
                label="APP买单金额">
            </el-table-column>
            <el-table-column
                prop="syncDate"
                label="同步日期">
            </el-table-column>
            <el-table-column
                prop="createTime"
                label="创建时间">
            </el-table-column>
            <el-table-column
                label="操作"
                fixed="right"
                width="50">
                <template v-slot="scope">
                    <div>
                        <el-button @click="onDelete(scope.row)" type="text" size="small">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            small
            :hide-on-single-page="true"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="condition.page"
            :page-sizes="[10, 20, 30, 40, 50, 100]"
            :page-size.sync="condition.rows"
            layout="sizes, prev, pager, next"
            :total.sync="condition.total">
        </el-pagination>

        <el-dialog title="同步数据" width="40%" :visible.sync="syncDialogVisible">
            <el-form :model="syncForm" label-width="120px" size="small">
                <el-form-item label="请选择同步日期">
                    <el-select v-model="syncForm.daysType" placeholder="请选择" clearable>
                        <el-option label="昨天" value="YESTERDAY"></el-option>
                        <el-option label="近三天" value="THREE"></el-option>
                        <el-option label="近七天" value="SEVEN"></el-option>
                        <el-option label="近十天" value="TEN"></el-option>
                        <el-option label="近30天" value="THIRTY"></el-option>
                        <el-option label="自定义" value="USER_DEFINE"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="请选择日期" v-if="syncForm.daysType === 'USER_DEFINE'">
                    <el-date-picker
                        v-model="syncForm.dateRange"
                        value-format="yyyy-MM-dd"
                        unlink-panels
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="this.CONST.analysis_date_options">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="syncDialogVisible = false" size="small">取 消</el-button>
                <el-button @click="syncConfirm" type="primary" size="small">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {addDpRevenue, deleteDpRevenue, getDpRevenueByPage, syncDpRevenue, updateDpRevenue} from '@/api/api'

export default {
    name: "DpRevenue",
    data() {
        return {
            // 分页搜索条件
            condition: {
                page: 1,
                rows: 10,
                total: 0,
                search: {}
            },
            // 表格数据
            tableData: [],
            // 新增或者编辑对话框显示
            addOrUpdateDialogVisible: false,
            // 标题
            addOrUpdateDialogTitle: '新增',
            // 新增或者编辑对话框表单
            addOrUpdateForm: {},
            // 选中行
            selectedRow: {},

            syncDialogVisible: false,
            syncForm: {
                daysType: null,
            },

            fields: [
                {
                    "label": "实收金额",
                    "prop": "actualAmt",
                    "desc": "实收金额=应收金额-优惠金额-退款金额"
                },
                {
                    "label": "应收金额",
                    "prop": "shouldAmt",
                    "desc": "包括了与美团点评合作的团购、买单、美团收单业务的线上交易数据，应收金额：用户消费后应该付的原价金额，未扣除优惠和退款"
                },
                {
                    "label": "订单数",
                    "prop": "orderCount",
                    "desc": "包括了与美团点评合作的团购、买单、美团收单业务的线上交易数据，订单数：用户消费的订单数量，一次验证多张团购券，算多个订单"
                },
                {
                    "label": "笔单价",
                    "prop": "perAmt",
                    "desc": "笔单价=应收额/订单数（所选时间内平均的订单金额）"
                },
            ]
        }
    },
    // 这里定义需要父组件传过来的东西
    props: {
        shopId: String,
        shopName: String,
        size: {
            type: String,
            default: 'small'
        },
    },
    watch: {
        shopName: function (val, oldVal) {
            this.shopName = val;
        }
    },
    methods: {
        // 渲染头部
        renderHeader(h, {column, $index}, item) {
            return [column.label, h(
                'el-tooltip',
                {
                    props: {
                        content: item.desc,
                        placement: 'top'
                    },
                },
                [h('span', {class: {'el-icon-question': true}})]
            )]
        },
        // 确认同步
        syncConfirm() {
            this.syncForm.shopId = this.shopId;
            if (this.syncForm.daysType === 'USER_DEFINE') {
                this.syncForm.startDate = this.syncForm.dateRange[0];
                this.syncForm.endDate = this.syncForm.dateRange[1];
            }
            syncDpRevenue(this.syncForm).then(data => {
                if (data.respCode == 1000) {
                    this.$message({
                        type: 'success',
                        message: '提交同步请求成功，系统正在后台同步数据，请稍后点击查询按钮，大约需要您等待1-2分钟!'
                    });
                    this.getData();
                    this.syncDialogVisible = false;
                }
            })
        },
        // 这里可以单独设置每一行的样式
        tableRowClassName({row, rowIndex}) {
            return '';
        },
        handleSizeChange(val) {
            this.getData();
        },
        handleCurrentChange(val) {
            this.getData();
        },
        // 格式布尔值
        formatBoolean: function (row, column, cellValue) {
            if (cellValue) {
                return "是";
            } else {
                return "否";
            }
        },
        showAddDialog: function () {
            this.addOrUpdateDialogTitle = '新增';
            this.addOrUpdateDialogVisible = true;
            this.addOrUpdateForm = {};
        },
        showUpdateDialog: function (row) {
            this.addOrUpdateDialogTitle = '编辑';
            this.addOrUpdateDialogVisible = true;
            this.selectedRow = row;
            // 深拷贝
            this.addOrUpdateForm = Object.assign({}, row);
        },
        reset: function () {
            this.$refs['searchForm'].resetFields();
        },
        exportExcel: function () {
            this.GLOBAL.exportExcel('#mainTable', '数据.xlsx');
        },
        add: function () {
            addDpRevenue(this.addOrUpdateForm).then(data => {
                this.addOrUpdateDialogVisible = false;
                this.getData();
            });
        },
        update: function () {
            updateDpRevenue(this.addOrUpdateForm).then(data => {
                this.addOrUpdateDialogVisible = false;
                this.getData();
            });
        },
        onDelete: function (row) {
            this.$confirm('请确认是否删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteDpRevenue({id: row.id}).then(data => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getData();
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        addOrUpdateConfirm: function () {
            if (this.addOrUpdateDialogTitle == '新增') {
                this.add();
            } else if (this.addOrUpdateDialogTitle == '编辑') {
                this.update();
            }
        },
        // 获取表格数据
        getData: function () {
            if (this.shopId) {
                this.condition.search.shopId = this.shopId;
            }
            getDpRevenueByPage(this.condition).then(data => {
                this.tableData = data.body.rows;
                this.condition.total = data.body.total;
            });
        },
    },
    created() {
        this.getData();
    },
}
</script>

<style scoped>
.el-input {
    width: 150px !important;
}

.el-select {
    width: 150px !important;
}

.revenue-tips {
    text-align: left;
    vertical-align: middle;
    font-size: 10px;
    color: #E6A23C;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 20px;
}
</style>
